<template>
  <div class="menu-page page-main">
    <div class="table-toolbar">
      <add-button @click="add()" />
    </div>
    <g-table
      ref="tableRef"
      table-layout="fixed"
      row-key="id"
      :columns="columns"
      :api="getMenus"
      :pagination="false"
      :scroll="{ y: '75vh', x: '100%' }"
      style="word-break: break-all"
    />

    <MenuDetail
      v-model:visible="visible"
      :data="activeRow"
      @change="search(false)"
    />
  </div>
</template>

<script setup lang="tsx">
import { deleteMenuById, getMenus } from "./api";
import type { IMenu } from "./entity";
import MenuDetail from "./detail.vue";

let visible = $ref(false);

const TYPE_COLOR_MAP = {
  M: "blue",
  C: "green",
  A: "orange",
};

const TYPE_LABEL_MAP = {
  M: "目录",
  C: "菜单",
  A: "按钮",
};

const { tableRef, columns, search } = useTable<IMenu>([
  { title: "菜单名称", dataIndex: "name", width: 300 },
  {
    title: "菜单ID",
    dataIndex: "id",
    width: 80,
  },
  {
    title: "图标",
    dataIndex: "icon",
    width: 80,
    customRender: ({ record }) => <i class={`fa ${record.icon}`}></i>,
  },
  {
    title: "类型",
    dataIndex: "menuType",
    width: 100,
    customRender: ({ record }) => (
      <a-tag color={TYPE_COLOR_MAP[record.menuType]}>
        {TYPE_LABEL_MAP[record.menuType]}
      </a-tag>
    ),
  },
  {
    title: "排序号",
    dataIndex: "sort",
    width: 80,
  },
  {
    title: "菜单URL",
    dataIndex: "component",
    width: 220,
  },
  {
    title: "授权标识",
    dataIndex: "perms",
    width: 200,
    ellipsis: true,
  },
  {
    title: "操作",
    dataIndex: "op",
    width: 120,
    fixed: "right",
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => add(record)}>编辑</table-button>
        <confirm-button danger onClick={() => remove(record)}>
          删除
        </confirm-button>
      </>
    ),
  },
]);

let activeRow = $ref<Partial<IMenu>>({});
function add(row: Partial<IMenu> = {}) {
  activeRow = { ...row };
  visible = true;
}

function remove({ id }: IMenu) {
  deleteMenuById(id as number).then(() => {
    AntMessage.success("已删除");
    search(false);
  });
}
</script>

<style lang="less"></style>
